<div>
    <div class="row justify-content-center">
        <div class="col-md-8" *ngIf="account$ | async as account">
            <h2>用户 [<strong>{{ account.login }}</strong>] 的密码</h2>

            <div class="alert alert-success" *ngIf="success">
                <strong>密码已修改！</strong>
            </div>

            <div class="alert alert-danger" *ngIf="error">
                <strong>发生错误！</strong> 密码无法更改。
            </div>

            <div class="alert alert-danger" *ngIf="doNotMatch">
                密码和确认密码不匹配！
            </div>

            <form name="form" role="form" (ngSubmit)="changePassword()" [formGroup]="passwordForm">
                <div class="form-group">
                    <label class="form-control-label" for="currentPassword">当前密码</label>
                    <input type="password" class="form-control" id="currentPassword" name="currentPassword"
                           placeholder="当前密码"
                           formControlName="currentPassword">

                    <div *ngIf="passwordForm.get('currentPassword')!.invalid && (passwordForm.get('currentPassword')!.dirty || passwordForm.get('currentPassword')!.touched)" >
                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('currentPassword')?.errors?.required">
                            密码是必填项。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="newPassword">新密码</label>
                    <input type="password" class="form-control" id="newPassword" name="newPassword"
                           placeholder="新密码"
                           formControlName="newPassword">

                    <div *ngIf="passwordForm.get('newPassword')!.invalid && (passwordForm.get('newPassword')!.dirty || passwordForm.get('newPassword')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('newPassword')?.errors?.required">
                            密码是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('newPassword')?.errors?.minlength">
                            密码至少需要4个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('newPassword')?.errors?.maxlength">
                            密码不能超过50个字符。
                        </small>
                    </div>

                    <jhi-password-strength-bar [passwordToCheck]="passwordForm.get('newPassword')!.value"></jhi-password-strength-bar>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="confirmPassword">确认新密码</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword"
                           placeholder="确认新密码"
                           formControlName="confirmPassword">

                    <div *ngIf="passwordForm.get('confirmPassword')!.invalid && (passwordForm.get('confirmPassword')!.dirty || passwordForm.get('confirmPassword')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('confirmPassword')?.errors?.required">
                            确认密码是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('confirmPassword')?.errors?.minlength">
                            确认密码至少需要4个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="passwordForm.get('confirmPassword')?.errors?.maxlength">
                            确认密码不能超过50个字符。
                        </small>
                    </div>
                </div>

                <button type="submit" [disabled]="passwordForm.invalid" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>
</div>
